<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test isVisible() Function</title>
  <style>
    #container {
      position: relative;
      padding-top: 20px;
      border: 1px dashed lightgrey;
    }

    #element {
      position: absolute;
      top: -10px;
    }

  </style>
</head>
<body>
<div id="container">
  <div id="element">
    This is an element.
  </div>
</div>

<script>
  function isVisible(el) {
    const rect = el.getBoundingClientRect();
    return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  const element = document.getElementById('element');

  if (isVisible(element)) {
    console.log('元素可见');
  } else {
    console.log('元素不可见');
  }

  // 子元素的offsetTop 可以获取距离父级元素的相关距离信息，注意父级元素的position 确认设置，不然子元素的offsetParent 可能是body
  const childElement = document.getElementById('element');

  const offsetTop = childElement.offsetTop;
  const offsetLeft = childElement.offsetLeft;

  console.log('元素顶部距离父元素顶部的高度:', offsetTop);
  console.log('元素左侧距离父元素左侧的宽度:', offsetLeft);

  // 方法2 。 可以分别获取元素相对视口的距离，子元素相对视口的距离 - 父元素相对视口的距离， 在对象的方向上计算然后比较也可以判断子元素是否在父元素的可是范围内
</script>
</body>
</html>
